<!--本组件用于显示顶部导航栏-->
<template>
    <div id="TopBarComponent">
        <a-input-search
            v-model:value="searchValue"
            :loading="false"
            allowClear
            enter-button
            placeholder="请输入搜索内容"
            size="large"
            @search="onSearch"
        />
        <a-badge id="SearchButton" :count="1000" :overflow-count="999">
            <a-button danger size="large" @click="goToMyCartView">
                我的购物车
                <slot name="icon">
                    <icon :style="{ color: 'hotpink' }">
                        <template #component>
                            <svg aria-hidden="true" class="icon">
                                <use xlink:href="#icon-gouwuche"></use>
                            </svg>
                        </template>
                    </icon>
                </slot>
            </a-button>
        </a-badge>
    </div>
</template>

<script lang="ts" setup>
import icon from "@ant-design/icons-vue";

import { ref } from "vue";
import router from "@/router/router.ts";
import { SearchRouterParams } from "@/model/SearchModel.ts";
//搜索框内容
const searchValue = ref("");

/**
 * 检索商品
 */
const onSearch = () => {
    //从路由中获取参数
    let routerParams: SearchRouterParams = router.currentRoute.value.query;

    //跳转到搜索页面,并传参
    router.push({
        name: "Search",
        query: {
            ...routerParams,
            queryParam: searchValue.value as SearchRouterParams["queryParam"],
        },
    });
};
/**
 * 跳转到我的购物车页面
 */
const goToMyCartView = () => {
    router.push({
        name: "Cart",
    });
};

</script>

<style lang="scss" scoped>
//距离顶部的距离
$margin-top: 20px;
#TopBarComponent {
    //background-color: #d6d3d3;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    :deep(.ant-input-group-wrapper) {
        margin-top: $margin-top;
        width: 60%;
    }

    #SearchButton {
        margin-top: $margin-top;
        margin-left: 5%;
    }
}
</style>